<template>
	<view>
		<!-- <page-head :title="'教学订单'" :headtype="1"></page-head> -->
		<view class="topblock">
			<view class="search">
				<view class="searchmain marginAuto flex">
					<uv-icon @click="searchfun()" style="margin-top:6rpx;" name="search" size="30" color="#999999"></uv-icon>
					<input class="searchinput" type="text" v-model="search" placeholder="请输入学员姓名/手机号进行搜索" />
				</view>
			</view>
			<view class="tagnav">
				<view class="tagnavmain marginAuto">
					<view class="naveach" @click="navfun(1)" :class="navac == 1 ? 'navactive':''">待服务（{{ classdata.wait_service || 0 }}）
						<!-- 
						待服务    已到场、未到场（原因） 
						 -->
						<view class="naveachx"></view>
					</view>
					<view class="naveach" @click="navfun(2)" :class="navac == 2 ? 'navactive':''">服务中（{{ classdata.service || 0 }}）
						<view class="naveachx"></view>
						<!-- 
						 服务中    平台订单-用户点完成
									后台录入-已买券（平台）  用户端操作：用户端上传券码-后台验码结工资  不需要教练操作
									后台录入-未买券（平台）   用户端上传券码，
															教练输入金额-支付
						 -->
					</view>
					<view class="naveach" @click="navfun(3)" :class="navac == 3 ? 'navactive':''">已完成（{{ classdata.over || 0 }}）
						<view class="naveachx"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="goodsl">
			<view class="goodsitem marginAuto" v-for="(item,index) in datas" :key="index">
				<view class="gdtop flex">
					<view class="gdtopl flex">
						<view class="gdtoplheadimg">
							<image v-if="!item.user_avatar" :src="apifun.serveimg+'headav.png'" mode=""></image>
							<image v-if="item.user_avatar" :src="apifun.URLimg+item.user_avatar" mode=""></image>
						</view>
						<view class="gdtoplname">{{ item.username }}</view>
						<view class="gdtoplphone flex" @click="callphone(item.mobile)">
							<text>{{ item.mobile }}</text>
							<uv-icon name="phone-fill" size="20" color="#999999"></uv-icon>
						</view>
					</view>
					<!-- 1待支付 2待接单  3教学中 4已完成  5已取消 -->
					<view class="gdtopr">{{ item.pay_status_txt }}</view>
				</view>
				<view class="gdphase flex">
					<view class="gdphaseeach flex">
						<uv-icon name="play-right-fill" color="#E53E30" size="10"></uv-icon>
						<text>套餐金额</text>
						<text style="color:E53E30">￥{{ item.amount }}</text>
					</view>
				</view>
				<view class="gdpr flex">
					<view class="gdprq" style="margin-top:15rpx;"></view>
					<view class="gdprtxt">项目：{{ item.course_name }}</view>
				</view>
				<view class="gdpr flex">
					<view class="gdprq" style="margin-top:15rpx;"></view>
					<view class="gdprtxt">来源：{{ item.source_name}}</view>
				</view>
				<view class="gdpr flex" v-if="item.coach_name">
					<view class="gdprq" style="margin-top:17rpx;"></view>
					<view class="gdprtxt">带教教练：{{ item.coach_name }}</view>
				</view>
				<view class="gdpr flex">
					<view class="gdprq" style="margin-top:17rpx;"></view>
					<view class="gdprtxt">备注：{{ item.remark }}</view>
				</view>
				<!-- <view class="gdtimeb flex">
					<view class="gdtimebl flex">
						<view class="gdtimebltitle mainBg baiColor">订单时间<view class="gdtimebld"></view></view>
						<view class="gdtimebltime mainColor">{{ item.create_time }}</view>
					</view>
					<view class="gdtimebr mainColor">{{ item.pay_type == 1 ? '微信':'先用后付' }}</view>
				</view> -->
				<view class="gdbtn flex">
					<!-- @click="navigate('/pages/order/orderxq','id='+item.id)" -->
					<view class="gdbtneach mainBg baiColor" v-if="item.status == 2 && item.coach_id==usermsg.id" @click="resentfun(item,index,1)">已到场</view>
					<view class="gdbtneach mainBg baiColor" v-if="item.status == 2 && item.coach_id==usermsg.id" @click="acitem=item,acindex=index,$refs.notarrived.open()">未到场</view>
					<view class="gdbtneach mainBg baiColor" v-if="item.status == 2 && item.accept_uid==usermsg.id" @click="distribution(item,index)">分配教练</view>
					<view class="gdbtneach mainBg baiColor" 
					v-if="item.status == 3 && item.source_id > 1 && item.accept_uid == usermsg.id" 
					@click="acitem=item,acindex=index,$refs.payblock.open()">支付</view>
				</view>
			</view>
		</view>
		<uv-popup ref="isshowjl" mode="bottom" round="20" @close="$refs.isshowjl.close()">
			<selectjl @acmsg="acmsg" :orderdata="jllistdata" @closepopup="$refs.isshowjl.close()"></selectjl>
		</uv-popup>
		<uv-popup ref="notarrived" mode="center" round="20" @close="$refs.notarrived.close()">
			<view class="popup" style="height:auto;padding: 20rpx 0;">
				<view class="popup-content">
					<input type="text" placeholder="请填写未到场理由" v-model="notarrivtxt" />
				</view>
				<view class="popup-btn flex">
					<view class="btns btn1" @click="$refs.notarrived.close()">取消</view>
					<view class="btns btn2" @click="resentfun(acitem,acindex,0)">提交</view>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="payblock" mode="center" round="20" @close="$refs.payblock.close()">
			<view class="popup" style="height:auto;padding: 20rpx 0;">
				<view class="popup-content">
					<input type="text" placeholder="请填写金额" v-model="paymoney" />
				</view>
				<view class="popup-btn flex">
					<view class="btns btn1" @click="$refs.payblock.close()">取消</view>
					<view class="btns btn2" @click="enterpay">确认支付</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>
<style scoped lang="scss"></style>
<script>
	import selectjl from "../../components/selectjl/selectjl.vue";
	export default {
		comments:{
			selectjl
		},
		data() {
			return {
				apifun:this.apifun,
				page:1,
				usermsg:{},
				navac:1,
				search:'',
				classdata:{},
				datas:[],
				moneydata:{},
				acjlitem:{},
				acitem:{},
				acindex:'',
				jllistdata:[],
				notarrivtxt:'',
				paymoney:''
			};
		},
		onLoad() {
			this.usermsgfun();
			this.initData();
			this.settlementmoneyfun()
		},
		methods: {
			callphone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			enterpay(){  //支付
				let sendData = {
					id:this.acitem.id,
					amount:this.paymoney
				};
				if(this.paymoney == '' || this.paymoney <= 0){
					this.apifun.toast('请输入金额');
					return false
				};
				this.apifun.unirequest('/coach/order/complete','post',sendData,(res)=>{
					if(res.code === 200){
						this.$refs.payblock.close();
						this.datas.splice(index,1);
						this.navac = 3;
						this.page = 1;
						this.datas = [];
						this.initData();
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			resentfun(item,index,type){  // 到场
				let sendData = {
					id:item.id,
					status:type,
					remark:this.notarrivtxt
				};
				this.apifun.unirequest('/coach/order/confirmOrder','post',sendData,(res)=>{
					if(res.code === 200){
						this.datas.splice(index,1);
						if(type == 1){
							this.navac = 2;
							this.page = 1;
							this.datas = [];
							this.initData();
						}
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			distribution(item,index){  // 打开分配教练列表
				this.acitem=item;
				this.acindex=index;
				this.apifun.unirequest('/coach/order/getCoachList','post',sendData,(res)=>{
					if(res.code === 200){
						this.$refs.isshowjl.open();
						let datas = res.data;
						this.jllistdata = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			initData(){
				let sendData = {
					type:this.navac,
					search:this.search,
					page:this.page,
					limit:this.apifun.limit
				};
				this.apifun.unirequest('/coach/order/getOrderList','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.classdata = datas;
						if(datas.list.data.length <= 0){
							this.page--;
							return false
						};
						this.datas = [...this.datas,...datas.list.data];
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			
			settlementmoneyfun(){  // 上部汇总
				this.apifun.unirequest('/coach/order/getOrderTotalAmount','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.moneydata = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			acmsg(jlitem){
				this.acjlitem = jlitem;
				let sendData = {
					coach_id:jlitem.id,
					id:this.acitem.id
				};
				this.apifun.unirequest('/coach/order/designCoach','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.$refs.isshowjl.close()
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			navfun(type){
				if(type == this.navac){
					return false
				};
				this.navac = type;
				this.page = 1;
				this.datas = [];
				this.initData()
			},
			searchfun(){
				this.page = 1;
				this.datas = [];
				this.initData()
			},
			navigate(urls,params){
				this.apifun.navigate(urls,params)
			},
			usermsgfun(){
				let sendData = {};
				this.apifun.unirequest('/coach/user/getUserInfo','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						uni.setStorageSync('usermsg', datas);
						this.usermsg = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				},true)
			},
		},
		onShow() {
			this.navac = 1;
			this.page = 1;
			this.datas = [];
			this.initData();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.datas = [];
			this.initData();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.page++;
			this.initData()
		},
		onHide() {
			this.$refs.isshowjl.close()
		},
		
	};
</script>

<style scoped lang="scss">
	.topblock{
		position: sticky;
		top: 0;
		width: 100%;
		z-index: 50;
		background:#fff;
	}
	.search{
		width: 100%;
		padding: 20rpx 0;
		.searchmain{
			width: 630rpx;
			height: 50rpx;
			padding:20rpx 30rpx;
			border-radius: 100rpx;
			background: #F3F9FF;
			.searchinput{
				width: 80%;
				height: 50rpx;
				line-height: 50rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
			}
		}
	}
	.tagnav{
		width: 100%;
		padding:30rpx 0 40rpx;
		border-top: 1px solid #EAEAEA;
		.tagnavmain{
			width:690rpx;
			display: flex;
			justify-content: space-around;
			.naveach {
				position: relative;
				color: #999999;
				font-size:30rpx;
				text-align: center;
				line-height: 50rpx;
				.naveachx {
					position: absolute;
					bottom: -22rpx;
					left: 50%;
					background: #fff;
					width: 80rpx;
					margin-left: -40rpx;
					height: 6rpx;
					border-radius: 100rpx;
					transition: background .5s;
				}
			}
			.navactive {
				color:#0E71EB;
				.naveachx {
					background: #0E71EB;
				}
			}
		}
	}
	// 列表
	.goodsitem{
		width: 650rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.gdtop{
			width: 100%;
			line-height: 52rpx;
			justify-content: space-between;
			.gdtopl{
				.gdtoplheadimg{
					width: 52rpx;
					height: 52rpx;
					image{
						width: 52rpx;
						height: 52rpx;
						border-radius: 100rpx;
					}
				}
				.gdtoplname,
				.gdtoplphone{
					font-size: 30rpx;
					color: #333333;
					margin-left: 20rpx;
				}
			}
			.gdtopr{
				font-size: 30rpx;
				color:#666666;
			}
		}
		.gdtimeb{
			margin-top: 20rpx;
			justify-content: space-between;
			.gdtimebl{
				border: 1px solid #0E71EB;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 6rpx;
				.gdtimebltitle{
					position: relative;
					font-size:28rpx;
					padding: 0 20rpx;
					.gdtimebld{
						position: absolute;
						top: 12rpx;
						right:-10rpx;
						width:16rpx;
						height: 16rpx;
						background: #fff;
						border-radius: 100rpx;
					}
				}
				.gdtimebltime{
					font-size:28rpx;
					padding: 0 20rpx;
				}
				
			}
			.gdtimebr{
				display: inline-block;
				border: 1px solid #0E71EB;
				font-size:28rpx;
				height: 44rpx;
				line-height: 44rpx;
				padding: 0 14rpx;
				border-radius: 6rpx;
			}
		}
		.gdphase{
			justify-content: space-between;
			margin-top: 20rpx;
			.gdphaseeach{
				font-size: 28rpx;
				color: #E53E30;
				font-weight: 600;
			}
		}
		.gdpr{
			.gdprq{
				display: inline-block;
				width: 16rpx;
				height: 16rpx;
				border: 1px solid #1177F4;
				border-radius: 50%;
			}
			.gdprtxt{
				margin-left: 10rpx;
				line-height:50rpx;
				font-size: 28rpx;
				color: #333333;
			}
		}
		.gdbtn{
			width: 100%;
			margin-top: 10rpx;
			justify-content:flex-end;
			.gdbtneach{
				padding:0 20rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size:30rpx;
				margin-left: 20rpx;
			}
		}
	}
	.popup {
		width: 600rpx;
		height: 416rpx;
		text-align: center;
	
		.popup-content {
			border: 1px solid #eee;
			margin: 30rpx auto 0;
			width: 510rpx;
			height:80rpx;
			line-height: 80rpx;
			border-radius: 10rpx;
			font-size: 30rpx;
			background: #FFFFFF;
			padding: 0rpx 16rpx;
			box-sizing: border-box;
			input{
				height:80rpx;
				line-height: 80rpx;
			}
		}
	
		.popup-btn {
			padding-top: 80rpx;
			justify-content: space-evenly;
	
			.btns {
				width: 240rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 10rpx;
				font-size: 30rpx;
			}
	
			.btn1 {
				color: #1686F8;
				border: 1rpx solid #1686F8;
			}
	
			.btn2 {
				background: #0E71EB;
				color: #FFFFFF;
			}
		}
	}
</style>